<template>
  <div class="profile_page">
    <section>
      <router-link :to="userInfo && userInfo.user_id ? '/profile/info' : '/login'" class="profile-link">
        <p class="user-page"><i :class=" userInfo ? 'iconfont icon-yonghu':'iconfont icon-yonghu1'"></i></p>
        <div class="user">
          <p class="user-info">{{username}}</p>
          <p class="user-phone"><i class=" iconfont icon-shouji"></i><span>{{mobile}}</span></p>
        </div>
        <p class="jt"><i class="iconfont icon-aright"></i></p>
      </router-link>
    </section>
    <section style="width: 100%" class="info-data">
      <router-link to="/balance" tag="div" class="info-data-link">
        <span class="info-data-top"><b>{{parseInt(balance).toFixed(2)}}</b>元</span>
        <span class="info-data-bottom">我的余额</span>
      </router-link>
      <router-link to="/benefit" tag="div" class="info-data-link">
        <span class="info-data-top"><b>{{count}}</b>个</span>
        <span class="info-data-bottom">我的优惠</span>
      </router-link>
      <router-link to="/points" tag="div" class="info-data-link">
        <span class="info-data-top"><b>{{pointNumber}}</b>分</span>
        <span class="info-data-bottom">我的积分</span>
      </router-link>
    </section>
    <section class="profile-1reTe">
      <router-link to="/order" class="myorder" tag="div">
        <i class="iconfont icon-zibiaodan"></i>
        <div class="list">
          <span>我的订单</span>
          <i class="iconfont icon-aright"></i>
        </div>
      </router-link>
      <router-link to="/order" class="myorder" tag="div">
        <i class="iconfont icon-shopping"></i>
        <div class="list">
          <span>积分商城</span>
          <i class="iconfont icon-aright"></i>
        </div>
      </router-link>
      <router-link to="/order" class="myorder" tag="div">
        <i class="iconfont icon-huiyuan-"></i>
        <div class="list">
          <span>会员服务</span>
          <i class="iconfont icon-aright"></i>
        </div>
      </router-link>
    </section>
    <section class="profile-1reTe">
      <router-link to="/order" class="myorder" tag="div">
        <i class="iconfont icon-fuwuzhongxin"></i>
        <div class="list">
          <span>服务中心</span>
          <i class="iconfont icon-aright"></i>
        </div>
      </router-link>
      <router-link to="/order" class="myorder" tag="div">
        <i class="iconfont icon-eliaomo"></i>
        <div class="list">
          <span>饿了么</span>
          <i class="iconfont icon-aright"></i>
        </div>
      </router-link>

    </section>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'inedx',
  data () {
    return {
      id: false,
      profiletitle: '我的',
      username: '登录/注册', // 用户名
      resetname: '',
      mobile: '暂无绑定手机号', // 电话号码
      balance: 0, // 我的余额
      count: 0, // 优惠券个数
      pointNumber: 0, // 积分数
      avatar: '', // 头像地址
      imgBaseUrl: ''
    }
  },
  computed: {
    ...mapState([
      'userInfo'
    ])
  },
  created () {
    this.initData()
  },
  methods: {
    ...mapMutations([
      'SAVE_AVANDER'
    ]),
    initData () {
      if (this.userInfo && this.userInfo.user_id) {
        this.id = this.userInfo.user_id
        this.avatar = this.userInfo.avatar
        this.username = this.userInfo.username
        this.mobile = this.userInfo.mobile || '暂无绑定手机号'
        this.balance = this.userInfo.balance
        this.count = this.userInfo.gift_amount
        this.pointNumber = this.userInfo.point
      } else {
        this.username = '登录/注册'
        this.mobile = '暂无绑定手机号'
      }
    }
  },
  watch: {
    userInfo: function (value) {
      this.initData()
    }
  }

}
</script>

<style lang="scss" scoped>
  .profile_page {
    margin: 0;
    padding: 0;
    position: relative;
    padding-bottom: 60px;
    overflow: hidden;

    a {
      color: #ffffff;
    }

    .profile-link {
      display: block;
      height: 180px;
      width: 100%;
      background: #3190e8;

      .user-page {
        margin-top: 40px;
        margin-left: 30px;
        width: 40px;
        float: left;

        i {
          font-size: 90px;
          display: block;
        }
      }

      .jt {
        position: absolute;
        right: 20px;
        top: 50px;

        i {
          display: block;
          font-size: 36px;
        }
      }
    }

    .user {
      float: left;
      margin: 0;
      padding: 0;
      margin-left: 46px;
      margin-top: 42px;
      margin-bottom: 5px;

      .user-info {
        margin-left: 20px;
        height: 0;
        font-size: 25px;
        font-weight: bold;
        line-height: 20px;
      }

      .user-phone {
        margin: 0;
        padding: 0;
        height: 20px;
        margin-top: 20px;
        margin-left: 5px;
        text-align: center;
        display: table-cell;
        vertical-align: middle;

        i {
          vertical-align: middle;
          display: inline-block;
          height: 34px;
          font-size: 34px;

        }

        span {
          vertical-align: middle;
          font-size: 30px;
        }
      }
    }

    .info-data {
      height: 140px;
      display: flex;
      background: #ffffff;
      margin-bottom: 10px;

      .info-data-link {
        flex: 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .info-data-top {
          font-size: 20px;

          b {
            font-size: 60px;
            color: #f90;
          }
        }

        .info-data-bottom {
          font-size: 20px;
        }
      }

      .info-data-link:nth-of-type(2) {
        .info-data-top {
          b {
            color: #ff5f3e;
          }
        }

      }

      .info-data-link:nth-of-type(3) {
        border: 0;

        .info-data-top {
          b {
            color: #6ac20b;
          }
        }
      }
    }

    .profile-1reTe {
      background: #ffffff;
      border-bottom: 10px solid #f1f1f1;

      .myorder {
        display: flex;
        flex-direction: row;
        height: 70px;
        align-items: center;

        i {
          width: 40px;
          display: block;
          font-size: 30px;
          margin-left: 20px;
          margin-top: 3px;
        }

        .list {
          flex: 1;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #f1f1f1;

          span {
            font-size: 20px;
            line-height: 70px;
          }

          i {
            display: block;
            font-size: 26px;
            line-height: 70px;
          }
        }
      }
    }
  }

  .router-slid-enter-active, .router-slid-leave-active {
    transition: all .4s;
  }

  .router-slid-enter, .router-slid-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }

</style>
